<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Finalove-App</title>
	<link rel="stylesheet" href="../resource/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="../resource/css/mint.css">
	<link rel="stylesheet" href="../resource/css/style.css">
	<link rel="stylesheet" href="../resource/css/index.css">
	<script src="../resource/js/vue.js"></script>
	<script src="../resource/js/mint.min.js"></script>
	<script src="../resource/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="main">
		<mt-header fixed :title="common.selected"></mt-header>
		
		<div class="mt-tab-container-div">
			<mt-tab-container class="page-tabbar-container" v-model="common.selected">
				<mt-tab-container-item id="消息">
					<div class="chat-msg-list-cell" v-for="item in chat_msg.chatroom_list">
						<mt-cell :title="item.chatroom_name">
							<mt-badge type="primary" :class="is_show_badge(item.is_read)"></mt-badge>
							<span class="last-msg">{{item.last_msg}}</span>
							<span class="last-time">{{item.last_time}}</span>
							<img class="last-head" slot="icon" :src="item.last_head" width="50" height="50">
						</mt-cell>
					</div>
					<p class="text-center" id="none-of-chatroom-list">暂无消息</p>
				</mt-tab-container-item>
				<!-- 通讯录 -->
				<mt-tab-container-item id="通信录" class="friend-list">
					<mt-index-list>
						<div @click="goToWidthLogin('friend/new_friends.html','newFriends',{user_id:userInfo.user_id})">
						<mt-cell title="新的朋友">
							<img slot="icon" src="../resource/icon/new_friends.png" width="50" height="50">
						</mt-cell>
						</div>
						<mt-index-section v-for="group in friend.friend_list" :index="group.initial">
							<div v-for="(item,index) in group.item" @click="goTo('friend/friend_details.html','myFriends',{
								friend_id:item.to,
								friend_head:item.head,
								friend_name:item.name
							})">
							<mt-cell :title="item.name">
								<img slot="icon" :src="item.head" width="50" height="50">
							</mt-cell>
							</div>
						</mt-index-section>
						<div id="friend-count">
							共 {{friend.friend_cout}} 位联系人
						</div>
					</mt-index-list>
				</mt-tab-container-item>
				<!-- 通讯录 -->
				<!-- 首页 -->
				<mt-tab-container-item id="首页">
					<div class="swipe-box">
						<mt-swipe :auto="6000" :show-indicators="false">
							<mt-swipe-item v-for="item in home.swipe_list">
								<img width="100%" height="100%" :src="item.img">
								<span class="swipe-remark">{{ item.remark }}</span>
							</mt-swipe-item>
						</mt-swipe>
					</div>
					<div class="news-list-box">
						<mt-loadmore :top-method="HomeloadTop" ref="loadmore" :auto-fill="false">
							<ul class="news-list">
								<li v-for="item in home.news_list" @click="goToNewsDetails(item.url_3w,item.title)">
									<img :src="item.imgsrc" width="100" height="100">
									<div class="news-list-text-box">
										<h3 class="title">{{item.title}}</h3>
										<p class="remark">{{item.source}}</p>
										<p class="remark">{{item.mtime}}</p>
									</div>
								</li>
							</ul>
						</mt-loadmore>
					</div>
				</mt-tab-container-item>
				<!-- 首页 -->
				<!-- 发现 -->
				<mt-tab-container-item id="发现">
					<mt-loadmore :top-method="HomeloadFindTop" 
						:bottom-method="HomeloadFindBottom"
						:bottom-all-loaded="find_list_all_loaded"
						:auto-fill="false" ref="findloadmore">
						<div class="find-block" v-for="(item,index) in find_list">
							<div class="info-box">
								<img class="user-head" :src="item.user_head" width="50" height="50">
								<span class="user-name">{{item.user_name}}</span>
							</div>
							<div class="find-ct">
								<span>{{item.text}}</span>
								<div class="img-list">
									<div class="img-box" v-for="(image,inde) in item.img_list" @click="showFindImgList(inde,item.img_list)">
										<img :src="image" width="100%">
									</div>
								</div>
							</div>
							<div class="btn-box">
								<span class="add-time">
									{{item.add_time}}
									<a href="javascript:;" @click="delFind(item.find_id)"
										:class="is_show_find_del_btn(item.user_id)">删除</a>
								</span>
								<mt-button size="small" plain class="replay-btn">
									<i class="fa fa-envelope-o"></i>
								</mt-button>
								<mt-button size="small" type="danger" plain class="praise-btn" @click="findPraise(index,item.find_id)">
									<i :class="class_is_praised(item.is_praised)"></i>
								</mt-button>
							</div>
						</div>
					</mt-loadmore>
				</mt-tab-container-item>
				<!-- 发现 -->
				<!-- 我的 -->
				<mt-tab-container-item id="我的">
					<div class="not-login-box">
						<img src="../resource/img/not_login_box_bg.jpg" width="100%" height="100%">
						<div class="not-login-btn-box">
							<mt-button @click="login" type="primary" size="large">登陆</mt-button>
							<mt-button @click="register" class="register-btn" size="large">注册</mt-button>
						</div>
					</div>
					<div class="is-login-box">
						<div class="add-friendclub-btn" @click="addFriendClub">
							<p class="text-right"><i class="fa fa-camera"></i></p>
							<p class="text-center">
								<i class="fa fa-plus"></i> 发布动态
							</p>
						</div>
						<p class="user-head-cell">
							<img class="user-head" :src="userInfo.user_head" width="80px" height="80px" @click="showHead">
							<span class="user-name">登陆账号：{{userInfo.user_name}}</span>
							<span class="user-nick-name">用户昵称：{{userInfo.nick_name}}</span>
						</p>
						<div class="mt-cell-box">
							<mt-cell title="我的动态" is-link>
								<img slot="icon" src="../resource/icon/friendclub.png" width="35" height="35">
							</mt-cell>
						</div>
						<div class="mt-cell-box">
							<div @click="goToWidthLogin('me/myBaseInfo.html','myBaseInfo',{user_id:userInfo.user_id})">
								<mt-cell title="我的信息" is-link>
									<img slot="icon" src="../resource/icon/user_2.png" width="35" height="35">
								</mt-cell>
							</div>
							<div @click="goToWidthLogin('me/myQRcode.html','myQRcode',{user_id:userInfo.user_id})">
								<mt-cell title="二维码名片" is-link>
									<img slot="icon" src="../resource/icon/qrcode.png" width="35" height="35">
								</mt-cell>
							</div>
							<mt-cell title="实名认证" is-link>
								<img slot="icon" src="../resource/icon/authentication.png" width="35" height="35" style="border-radius: 50%;">
							</mt-cell>
							<mt-cell title="安全中心" is-link>
								<img slot="icon" src="../resource/icon/safe.png" width="35" height="35">
							</mt-cell>
						</div>
						<div class="mt-cell-box" @click="goTo('about.html','about','')">
							<mt-cell title="关于Finalove" is-link>
								<img slot="icon" src="../resource/icon/about.png" width="35" height="35">
							</mt-cell>
						</div>
						<div class="mt-cell-box" @click="logout">
							<mt-cell title="注销当前账号" is-link>
								<img slot="icon" src="../resource/icon/log_out.png" width="35" height="35">
							</mt-cell>
						</div>
					</div>
				</mt-tab-container-item>
				<!-- 我的 -->
			</mt-tab-container>
		</div>
		
		<!-- tabbar -->
		<mt-tabbar v-model="common.selected" fixed>
			<mt-tab-item id="消息">
				<img slot="icon" src="../resource/icon/msg.png">
				消息
			</mt-tab-item>
			<mt-tab-item id="通信录">
				<img slot="icon" src="../resource/icon/user_list.png">
				通信录
			</mt-tab-item>
			<mt-tab-item id="首页">
				<img slot="icon" src="../resource/icon/home.png">
				首页
			</mt-tab-item>
			<mt-tab-item id="发现">
				<img slot="icon" src="../resource/icon/find.png">
				发现
			</mt-tab-item>
			<mt-tab-item id="我的">
				<img slot="icon" src="../resource/icon/user.png">
				我的
			</mt-tab-item>
		</mt-tabbar>
		<!-- tabbar -->
	</div>
	<audio src="" controls="controls" autoplay="false" id="RingMp3" style="display: none;"></audio>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				userInfo:"",
				downloadingText:"已下载：0 MB",
				backbtn:0,
				wsTimeout:0,
				common:{
					selected:"首页",
				},
				home:{
					swipe_list:"",
					news_list:"",
				},
				friend:{
					friend_cout:0,
					friend_list:[],
				},
				chat_msg:{
					chatroom_list:[]
				},
				find_list:[],
				find_list_all_loaded:false,
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					// 获取配置
					$.getJSON('../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
						main.app_version = res.app_version;
						main.app_version_check_url = res.app_version_check_url;
						main.socket_url = res.socket_url;
					});
					// 在这里调用h5 plus api
					document.addEventListener('plusready',function () {
						// 沉浸式导航栏
						plus.navigator.setFullscreen(true);
						// 返回键
						plus.key.addEventListener('backbutton', function() {
							if(main.backbtn == 0){
								main.backbtn = 1;
								main.$toast({message:'再按一次退出',position:'bottom',duration: 1000});
								setTimeout(function() {
									main.backbtn = 0;
								},1000);
								return false;
							}else{
								plus.runtime.quit();
							}
						}, false);
						// user登陆信息
						main.checkAndGetUserInfo();
						main.autoUpdateVersion();
						main.getNewsData();
						main.getFriendListData();
						main.getSwipeData();
						main.getChatMsgData();
						main.getFindList();
					},false);
					$(".friend-list").css({"height":window.innerHeight-95 + "px"});
				},
				/**
				 * [获取好友列表数据]
				 */
				getFriendListData() {
					var url = this.api_prefix + "friends/getFriendsList";
					if(!this.checkLogin()){
						main.friend = {friend_cout:0,friend_list:[]}
						return false;
					}
					var param = {
						api_key:this.api_key,
						params:{
							user_id:this.userInfo.user_id
						}
					}
					$.post(url,param,function(res) {
						main.friend = res.data;
					});
				},
				/**
				 * [获取轮播图数据]
				 */
				getSwipeData() {
					var url = this.api_prefix + "index/getSwipeData";
					var param = {
						api_key:this.api_key,
						params:"",
					}
					$.post(url,param,function(res) {
						main.home.swipe_list = res.data;
						main.linkSocket();
					});
				},
				/**
				 * [获取新闻列表数据]
				 */
				getNewsData() {
					this.$indicator.open({text:'Loading....',spinnerType: 'double-bounce'});
					var api_arr = [0,3,5,8,10,13,15,20];
					var api_url = "http://c.m.163.com/nc/article/headline/T1348647853363/"+api_arr[Math.floor((Math.random()*api_arr.length))]+"-40.html";
					$.get(api_url,function(res){
						main.$indicator.close();
						main.home.news_list = res.T1348647853363;
						main.home.news_list.splice(0, 1);
// 						console.log(main.home.news[0].title)
// 						console.log(main.home.news[0].imgsrc)
// 						console.log(main.home.news[0].mtime)
// 						console.log(main.home.news[0].source)
					})
				},
				/**
				 * [获取聊天室列表]
				 */
				getChatMsgData() {
					if(this.checkLogin()){
						this.chat_msg = {
							chatroom_list:[{
								last_head:"../resource/img/0.jpg",
								last_msg:"this is last message",
								last_time:"2019-01-28 11:22",
								chatroom_name:"this is chat room name",
								is_read:0
							},{
								last_head:"../resource/img/1.jpg",
								last_msg:"this is last message",
								last_time:"2019-01-28 11:22",
								chatroom_name:"this is chat room name",
								is_read:1
							},{
								last_head:"../resource/img/2.jpg",
								last_msg:"this is last message",
								last_time:"2019-01-28 11:22",
								chatroom_name:"this is chat room name",
								is_read:0
							},{
								last_head:"../resource/img/0.jpg",
								last_msg:"this is last message",
								last_time:"2019-01-28 11:22",
								chatroom_name:"this is chat room name",
								is_read:1
							}]
						}
						if(this.chat_msg.chatroom_list.length == 0){
							$("#none-of-chatroom-list").show();
						}
					}
				},
				is_show_badge(i){
					if(i == 0){
						return "show";
					}else{
						return "not-show";
					}
				},
				getFindList() {
					if(this.checkLogin()){
						this.find_list = [{
							find_id:1,
							is_praised:1,
							user_id:1,
							user_head:"../resource/img/0.jpg",
							user_name:"this is nick name",
							text:"这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
							add_time:"2019-01-28 14:35",
							img_list:[
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
							]
						},{
							find_id:2,
							is_praised:0,
							user_id:2,
							user_head:"../resource/img/2.jpg",
							user_name:"this is nick name",
							text:"这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
							add_time:"2019-01-28 14:35",
							img_list:[
								"../resource/img/1.jpg",
								"../resource/img/0.jpg",
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
							]
						},{
							find_id:2,
							is_praised:0,
							user_id:this.userInfo.user_id,
							user_head:"../resource/img/2.jpg",
							user_name:"this is nick name",
							text:"",
							add_time:"2019-01-28 14:35",
							img_list:[
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
								"../resource/img/2.jpg",
							]
						}];
					}
				},
				is_show_find_del_btn(id) {
					if(id == this.userInfo.user_id){
						return "show del-btn";
					}else{
						return "not-show del-btn";
					}
				},
				class_is_praised(i) {
					if(i == 1){
						return "fa fa-heart";
					}
					return "fa fa-heart-o";
				},
				showFindImgList(index,imgs) {
					console.log(index)
					var urls = imgs;
					plus.nativeUI.previewImage(urls,{
						current:index
					});
				},
				findPraise(index,find_id) {
					if(this.find_list[index].is_praised){
						this.find_list[index].is_praised = 0;
					}else{
						this.find_list[index].is_praised = 1;
					}
					// $.post()
				},
				delFind(id) {
					this.$messagebox({
						title:"提示",
						message:"您确认要删除此条动态吗？",
						confirmButtonText:"删除",
						cancelButtonText:"取消",
						showCancelButton:true,
						closeOnClickModal:false
					}).then(action => {
						if (action == 'confirm') {
							main.$toast("删除成功");
							main.getFindList();
						}
					}).catch();
				},
				/**
				 * [首页新闻列表下拉刷新]
				 */
				HomeloadTop() {
					this.getNewsData();
					this.$refs.loadmore.onTopLoaded();
				},
				HomeloadFindTop() {
					this.$indicator.open({text:'Loading....',spinnerType: 'double-bounce'});
					setTimeout(function() {
						main.getFindList();
						main.$indicator.close();
						main.$refs.findloadmore.onTopLoaded();
					},1500)
				},
				HomeloadFindBottom() {
					if(this.find_list.length >= 8){
						this.$toast({message:'没有更多数据了~',position:'bottom',duration: 1000})
						main.$refs.findloadmore.onBottomLoaded();
						return false;
					}
					setTimeout(function() {
						main.find_list.push({
							find_id:2,
							is_praised:0,
							user_id:2,
							user_head:"../resource/img/2.jpg",
							user_name:"this is nick name",
							text:"这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
							add_time:"2019-01-28 14:35",
							img_list:[
								"../resource/img/1.jpg",
								"../resource/img/0.jpg",
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
								"../resource/img/1.jpg",
								"../resource/img/2.jpg",
								"../resource/img/0.jpg",
							]
						});
						main.$refs.findloadmore.onBottomLoaded();
					},1500);
				},
				/**
				 * 跳转
				 */
				goTo(url,viewId,param) {
					if (url) {
						plus.webview.close(viewId);
						var newView = plus.webview.create(url,viewId,{},{
							param:param
						});
						plus.webview.show(newView,'slide-in-right',200);
					}else{
						this.$toast("地址错误")
					}
				},
				/**
				 * [登陆状态下跳转]
				 */
				goToWidthLogin(url,viewId,param) {
					if(!this.checkLogin()){
						return false;
					}
					if (url) {
						plus.webview.close(viewId);
						var newView = plus.webview.create(url,viewId,{},{
							param:param
						});
						plus.webview.show(newView,'slide-in-right',200);
					}else{
						this.$toast("地址错误")
					}
				},
				/**
				 * [跳转新闻详情]
				 */
				goToNewsDetails(url,title) {
					if (url) {
						plus.webview.close("news_details");
						var news_details = plus.webview.create("news/details.html","news_details",{},{
							url:url,
							title:title
						});
						plus.webview.show(news_details,'slide-in-right',200);
					}else{
						this.$toast("地址错误")
					}
				},
				/**
				 * [发布动态]
				 */
				addFriendClub() {
					this.$toast("发布动态");
				},
				showHead() {
					var urls = [this.userInfo.user_head];
					plus.nativeUI.previewImage(urls);
				},
				/**
				 * [登陆]
				 */
				login() {
					plus.webview.close("loginView");
					plus.webview.open("login.html","loginView",{},"slide-in-right",200);
				},
				register() {
					plus.webview.close("registerView");
					plus.webview.open("register.html","registerView",{},"slide-in-right",200);
				},
				/**
				 * [登出]
				 */
				logout() {
					this.$messagebox({
						title:"提示",
						message:"确认注销当前账号?",
						showCancelButton:true,
						closeOnClickModal:false
					}).then(action => {
						if (action == 'confirm') {
							plus.storage.removeItem("user_id");
							plus.storage.removeItem("user_head");
							plus.storage.removeItem("nick_name");
							plus.storage.removeItem("email");
							this.userInfo = "";
							this.selected = "我的";
							$(".is-login-box").hide();
							$(".not-login-box").show();
							this.getFriendListData();
						}
					}).catch();
					
				},
				/**
				 * [登陆检测]
				 */
				checkLogin() {
					this.userInfo = {
						user_id:plus.storage.getItem("user_id"),
						user_name:plus.storage.getItem("user_name"),
						user_head:plus.storage.getItem("user_head"),
						nick_name:plus.storage.getItem("nick_name"),
						email:plus.storage.getItem("email"),
					}
					// alert(JSON.stringify(this.userInfo))
					if(this.userInfo.user_id){
						return true;
					}else{
						main.common.selected = "我的";
						return false;
					}
				},
				checkAndGetUserInfo() {
					if(this.checkLogin()){
						var url = this.api_prefix + "index/getUserInfo";
						var param = {
							api_key:this.api_key,
							params:{
								id:plus.storage.getItem("user_id")
							}
						}
						$.post(url,param,function(res) {
							if(res.code == 1){
								main.userInfo = {
									user_id:res.data.id,
									user_name:res.data.user_name,
									nick_name:res.data.nick_name,
									email:res.data.email,
									user_head:res.data.head
								}
								plus.storage.setItem("user_id",res.data.id);
								plus.storage.setItem("user_name",res.data.user_name);
								plus.storage.setItem("nick_name",res.data.nick_name);
								plus.storage.setItem("email",res.data.email);
								plus.storage.setItem("user_head",res.data.head);
								$(".is-login-box").show();
							}else{
								main.$toast("登陆失败:"+res.msg);
								$(".is-login-box").hide();
								$(".not-login-box").show();
								main.common.selected = "我的";
							}
						}).error(function() {
							main.$toast("登陆失败~");
							$(".is-login-box").hide();
							$(".not-login-box").show();
							main.common.selected = "我的";
						});
						this.userInfo = {
							user_id:plus.storage.getItem("user_id"),
							user_name:plus.storage.getItem("user_name"),
							user_head:plus.storage.getItem("user_head"),
							nick_name:plus.storage.getItem("nick_name"),
							email:plus.storage.getItem("email"),
						}
					}else{
						this.userInfo = "";
						$(".not-login-box").show();
					}
				},
				/**
				 * [版本自动更新]
				 */
				autoUpdateVersion() {
					var url = this.app_version_check_url+"?t="+new Date().getTime();
					$.getJSON(url,function(res) {
						if(res.app_version != main.app_version){
							main.$messagebox({
								title:"更新提示",
								message:"发现版本是否现在更新？",
								confirmButtonText:"现在更新",
								cancelButtonText:"暂不更新",
								showCancelButton:true,
								closeOnClickModal:false
							}).then(action => {
								if (action == 'confirm') {
									var url = res.apk_url;//下载地址
									// main.$indicator.open({text:'下载更新中，请勿关闭',spinnerType: 'double-bounce'});
									var dtask = plus.downloader.createDownload(url,{},function(d,status){
										if(status==200){
											main.$indicator.close();
											var path=d.filename;
											plus.runtime.install(path);
										}else{//下载失败
											alert('Download failed:'+status);
										}
									});
									dtask.addEventListener("statechanged",function(task,status){
										if(!dtask){
											return false;
										}
										switch(task.state){
											case 3:
												main.$indicator.open({text:"下载更新中，请勿关闭",spinnerType: 'double-bounce'});
												// progressVal = (task.downloadedSize/task.totalSize)*100;
												main.downloadingText = "已下载：" + (task.downloadedSize/1024/1024).toFixed(2) + " Mb";
												$(".mint-indicator-text").html('<span class="mint-indicator-text" style="">下载更新中，请勿关闭，'+main.downloadingText+'</span>')
												break;
											case 4: 
												main.$toast('下载完成');
												break;
										}
									});
									dtask.start();
								}
							}).catch(err => { 
								if (err == 'cancel') {
									// plus.runtime.quit();
								} 
							});
						}
					})
				},
				linkSocket() {
					var socket_url = this.socket_url;
					if(this.checkLogin()){
						// 点击消息
						plus.push.addEventListener( "click", function ( msg ) {
							switch (msg.title){
								case "好友请求":
									main.goToWidthLogin('friend/new_friends.html','newFriends',{user_id:main.userInfo.user_id});
									break;
								default:
									break;
							}
						}, false );
						this.ws = new WebSocket(socket_url);
						this.ws.onopen = function(){
							// var uid = "uid:"+plus.storage.getItem("user_id");
							// ws.send(uid);
							main.heartbeat();
							// setTimeout(function(){
							// 	main.ws.send("uid:"+plus.storage.getItem("user_id"));
							// },30000);
						};
						this.ws.onmessage = function(e){
							var data = JSON.parse(e.data);
							plus.push.createMessage(data.msg,"",{title:"好友请求"});
							$("#RingMp3").attr({src:"../resource/ring.mp3?t="+new Date().getTime(),autoplay:true});
						}
						this.ws.onerror = function() {
							main.heartbeat();
						}
						// setTimeout(function() {
							 // main.linkSocket();
						// },90000);
					}
				},
				heartbeat() {
					if(this.ws.readyState == 1){
						this.ws.send("uid:"+plus.storage.getItem("user_id"));
						setTimeout(function(){
							main.heartbeat();
						},30000);
					}else{
						if(this.wsTimeout < 3){
							this.ws.send("uid:"+plus.storage.getItem("user_id"));
							this.wsTimeout ++;
							setTimeout(function(){
								main.heartbeat();
							},1000);
						}else{
							this.$messagebox({
								title:"Notice",
								message:"socket disconnected,reconnect or not?",
								confirmButtonText:"reconnect",
								cancelButtonText:"cancel",
								showCancelButton:true,
								closeOnClickModal:false
							}).then(action => {
								if (action == 'confirm') {
									main.wsTimeout = 0;
									main.linkSocket();
								}
							}).catch(() => {});
						}
					}
				}
			}
		})
	</script>
</body>
</html>
